<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/28 23:19:15
  @file: details.vue
  @description:
  ==================
  产品页面详细内容
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="details">
    <!-- 导航目录 swiper 代表swiper-container 和 swiper-wrapper -->
    <swiper ref="prodNav" class="prod-nav" :options="prodNavOpt">
      <swiper-slide
        :class="activeIndex===index?'active-nav':''"
        class="swiper-no-swiping"
        @click.native="handleClickTimeSlide(index)"
        v-for="(item,index) in prodNavList"
        :key="index">
        <img :src="item.img_url" alt="">
        <p>{{item.name}}</p>
      </swiper-slide>
    </swiper>
    <!-- 展示的外部swiper盒子，内部又有一个swiper盒子 -->
    <swiper ref="prodOut" class="prod-out" :options="prodOutOpt">
      <swiper-slide class="swiper-no-swiping prod-out-slide" v-for="(item,index) in swiperList" :key="index">
        <!-- 每一个子项 -->
        <swiper ref="prodInner" class="prod-inner" :options="prodInnerOpt">
          <swiper-slide class="prod-inner-slide" v-for="(item2,index2) in item" :key="index2">
            <img :src="item2.cat_icon" alt="">
            <div class="content">
              <h1>{{item2.goods_name}}</h1>
              <div class="text">
                {{item2.goods_introduce}}
              </div>
            </div>
          </swiper-slide>
          <div class="btn swiper-button-prev" slot="button-prev"></div>
          <div class="btn swiper-button-next" slot="button-next"></div>
        </swiper>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper/src/index';
export default {
  name: 'GFDetails',
  components: { swiper, swiperSlide },
  props: {
    // 导航
    prodNavList: { type: Array },
    // 一层的swiper导航
    swiperList: { type: Array }
  },
  data () {
    return {
      activeIndex: 0
    };
  },
  methods: {
    handleClickTimeSlide (index) {
      this.activeIndex = index;
      this.prodOut.slideTo(index, 1000);
    }
  },
  computed: {
    prodNavOpt () {
      return {
        slidesPerView: 7, // 将tabs块儿平均分成几份
        slidesPerColumnFill: 'row', // 行布局
        slidesPerColumn: 5 // 显示5行
      };
    },
    prodOutOpt () {
      return {
        autoplay: false,
        noSwiping: true
      };
    },
    prodInnerOpt () {
      return {
        // notNextTick: true,
        navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
        // autoplay: true
      };
    },
    prodNav () { return this.$refs.prodNav.swiper; },
    prodOut () { return this.$refs.prodOut.swiper; },
    prodInner () { return this.$refs.prodInner.swiper; }
  }
};
</script>

<style lang='scss' scoped>
.details {
  background: var(--bg);
}
/* 导航盒子 */
.prod-nav {
  width: 70%;
  margin: 0 auto;
  padding: 56px 0px 26px;
  .swiper-wrapper {
    .swiper-slide {
      /* 每个swiper-slide */
      text-align: center;
      box-sizing: border-box;
      border-left: 1px solid #cccccc;
      border-right: 1px solid #cccccc;
      margin-bottom: 20px;
      font-size: 16px;
      cursor: pointer;
    }
    .swiper-slide:hover {
      opacity: 0.6;
    }
    .active-nav {
      color: var(--themeAColor);
    }
  }
}
/* 产品盒子 */
.prod-out {
  width: 90%;
  margin: 0 auto;
  padding: 56px 0px 26px;
  .swiper-wrapper {
    .prod-out-slide {
      /* 每个swiper-slide */
      text-align: center;
      box-sizing: border-box;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 30px;
      padding: 50px;
      border: 1px solid #cccccc;
      cursor: pointer;
      // 内部slide盒子
      .prod-inner {
        .swiper-wrapper {
          // 每一个内部的slide
          .prod-inner-slide {
            img {
              float: left;
              width: 59%;
              margin-left: 1%;
            }
            .content {
              width: 40%;
              display: inline-block;
              padding: 20px;
              box-sizing: border-box;
              h1 {
                font-size: 25px;
                font-weight: 500;
                color: #000000;
              }
              .text {
                padding: 50px 20px 60px;
                text-align: left;
                text-indent: 2em;
              }
            }
          }
        }
        .btn {
          position: relative;
          left: 30%;
          transform: translate(0, -100%);
          display: inline-block;
          margin: 0 20px;
          width: 150px;
        }
        .swiper-button-prev {
          background: #c30d23;
        }
        .swiper-button-next {
          background: #555;
        }
        .swiper-button-prev::before,
        .swiper-button-next::before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
        .swiper-button-prev::before {
          content: '上一个';
        }
        .swiper-button-next::before {
          content: '下一个';
        }
      }
    }
  }
}
</style>
